<template>
    <div>
        <div class="box">
            <!-- 筛选查询 -->
            <div class="list">
                <div>
                    <img class="list-img" src="../../assets/images/搜索小.png" alt="">
                </div>
                <div>
                    筛选查询
                </div>
            </div>
            <div class="search">
                <div class="search">
                    <div style="display: flex;">
                        <div class="whead">
                            <div class="left">用户ID  :</div>
                            <el-input v-model="input" @change="btnchange(input)"
                                style="width: 240px; margin-left: 16px;" placeholder="用户ID">
                            </el-input>
                        </div>
                        <div class="whead">
                            <div class="left">用户手机号  :</div>
                            <el-input v-model="phone" @change="phoneChange(phone)" style="width: 240px;"
                                placeholder="用户手机号">
                            </el-input>
                        </div>
                        <div class="whead">
                            <div class="left">智能渔方编号  :</div>
                            <el-input v-model="number" @change="fishnumberChange(number)" style="width: 240px;"
                                placeholder="智能渔方编号">
                            </el-input>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div class="whead">
                            <div >租赁属性 :</div>
                            <el-select v-model="property" placeholder="全部" @change="propertyChange(property)"
                                style="margin-left: 9px; width: 240px;">
                                <el-option v-for="item in status" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="whead">
                            <div class="left">所属水库  :</div>
                            <el-select v-model="city" placeholder="全部" @change="cityChange(city)"
                                style="margin-left: 16px; width: 240px;">
                                <el-option v-for="item in options" :key="item.code" :label="item.name" 
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="whead">
                            <div class="left">所属订单  :</div>
                            <el-input v-model="orderData" @change="orderDataChange(orderData)"
                                style="width: 240px; margin-left: 33px;" placeholder="智能渔方订单ID">
                            </el-input>
                        </div>
                        <div>
                            <el-button type="primary" @click="btnSearch">搜索</el-button>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据列表 -->
            <div class="lists">
                <div class="list">
                    <div>
                    </div>
                    <div>
                        <img class="list-img" src="../../assets/images/查询数据列表.png" alt="">
                    </div>
                    <div>
                        数据列表
                    </div>
                </div>
               
                <div style="display: flex; align-items: center;">
                    <!-- <div style="margin-right: 20px; " v-permission="['fishPartyOrder:list:export']">
                    <el-button v-on:click="exportBtn()" size="small" type="primary">导出数据</el-button>
                </div> -->
                
                    <el-form>
                        <el-form-item prop="file">
                            <el-upload class="upload-demo" ref="upload" multiple accept=".xlsx" action=""
                                :http-request="httpRequest" :auto-upload="false" :show-file-list="false">
                                <el-button slot="trigger" size="small" type="primary">导入设备号和密码</el-button>
                                <el-button style="margin-left:5px" size="small" type="primary"
                                    @click="submitUploadList">上传
                                </el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form> 
                    <div style="display: flex; ">
                    <!-- <div style="margin-right: 20px; " v-permission="['fishPartyOrder:list:export']">
                    <el-button v-on:click="exportBtn()" size="small" type="primary">导出数据</el-button>
                </div> -->
                
                    <el-form>
                        <el-form-item prop="file">
                            <el-upload class="upload-demo" ref="uploads" multiple accept=".xlsx" action=""
                                :http-request="httpRequests" :auto-upload="false" :show-file-list="false">
                                <el-button slot="trigger" size="small" type="primary">导入投喂设备信息</el-button>
                                <el-button style="margin-left:5px" size="small" type="primary"
                                    @click="submitUploadLists">上传
                                </el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>  
                </div> 
                </div>
               
            </div>
            <div>
                <!-- 表格 -->
                <el-table border :data="listData" style="width: 100%" align="center">
                    <el-table-column prop="fishPartyNo" label="智能渔方编号" align="center"></el-table-column>
                    <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
                    <el-table-column prop="effectiveDate" label="租赁起日期" align="center"></el-table-column>
                    <el-table-column prop="expirationDate" label="租赁截至日期" align="center"></el-table-column>
                    <el-table-column  label="渔方属性" align="center">
                        <template slot-scope="scope">
                            <span>
                              {{  scope.row.homeLiveFlag==0 ? '私域': '公域'}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="attribute" label="租赁属性" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.attribute==1">
                                租赁3年获得40000元人民币
                            </div>
                            <div v-if="scope.row.attribute==2">
                                租赁3年鱼获自行处理 
                            </div>
                            <div v-if="scope.row.attribute==3">
                                租赁3年获得2400斤鱼
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reservoirName" label="所属水库" align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
                             <el-button v-permission="['fishParty:list:edit']" @click="editClick(scope.row)" type="primary" size="small">编辑</el-button>
                            <!-- <el-button  v-permission="['fishParty:list:delete']" @click="handleClick(scope.row)" type="text" size="small">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { editFishParty, importFishPartyMonitor ,reservoir,importFishPartyFeedNo} from '@/api/user'
import { Toast } from 'vant';
export default {
    data() {
        return {
            fileList: [],
            loadUrl: 'https://day.smartfish.com.cn/api/file/export/importFishPartyMonitor',
            input: '', //搜索
            phone: '', //手机号搜索
            timeInfo: '', //日期选择
            city: '',//所属水库
            property: '', //属性
            number: '',//编号
            orderData: '', //所属订单
            loading: false,
            selectedAssetsList: [], // 该数组对象
            assetsUidList: [], // 下标值
            currentPage: 1, //当前页数
            pageSize: 10, //每页条数
            total: 0, //总条目数
            listData: [],
            attribute: '',//渔方属性：-1:所有 1.租赁3年不要鱼 2.租赁3年鱼自理
            fishPartyNo: '',//渔方编号
            homeLiveFlag: '', //是否公域渔方标识 -1:所有 0：否 1：是
            phoneNumber: '', //用户手机号
            reservoirId: '', //水库ID
            userId: '', //用户ID
            options: [],
            status: [{
                value: 1,
                label: '租赁3年获得40000元人民币'
            },
            {
                value: 2,
                label: '租赁3年鱼获自行处理'
            },
            {
                value: 3,
                label: '租赁3年获得2400斤鱼'
            }
            ],
            uploadFile: '',
            uploadUrl: '',
            orderId: '',
            // buttonPermissionList:[]
        }
    },
    created() {
        this.reservoirList()
        this.editFishParty(this.pageSize, this.currentPage)
    //    JSON.parse(localStorage.getItem('buttonPermissionList')).forEach(item=>{
    //     this.buttonPermissionList =item.code
    //   })  
    },
    methods: {
        // 上传渔方设备号和密码
        async httpRequest(param) {
            let fileObj = param.file; // 相当于input里取得的files
            let formData = new FormData(); // FormData 对象
            formData.append("file", fileObj); // 文件对象
            let result = await importFishPartyMonitor(formData)
            if(result.code==0){
                Toast.success('上传成功');
            }else{
                Toast.success('上传失败');
            }
        },
         // 上传渔方设备号和密码
         async httpRequests(param) {
            let fileObj = param.file; // 相当于input里取得的files
            let formData = new FormData(); // FormData 对象
            formData.append("file", fileObj); // 文件对象
            let result = await importFishPartyFeedNo(formData)
            if(result.code==0){
                Toast.success('上传成功');
            }else{
                Toast.success('上传失败');
            }
        },
        //  // 导出渔方列表数据
        //  async exportBtn() {
        //     let data = {
        //         limit: this.pageSize,
        //         page: this.currentPage,
        //         reservoirId: this.reservoirId,
        //         source: this.source,
        //         status: this.status
        //     }
        //     let result = await exportFryWorkOrderExcel(data)
        //     if (result.code == 0) {
        //         // 下载文件
        //         window.location.href = process.env.VUE_APP_BASE_API + "/file/export/exportInfo?fileName=" + result.data;
        //     }
        // },
        submitUploadList() {
            this.$refs.upload.submit();
        },
        submitUploadLists() {
            this.$refs.uploads.submit();
        },
        async editFishParty(limit, page) {
            let data = {
                limit: this.pageSize,
                page: this.currentPage,
                attribute: this.attribute,
                fishPartyNo: this.fishPartyNo,
                homeLiveFlag: this.homeLiveFlag,
                phoneNumber: this.phoneNumber,
                userId: this.userId,
                orderId: this.orderId,
                reservoirId:this.reservoirId
            }

            let result = await editFishParty(data)
            if (result.code == 0) {
                let records = result.data.records;
                // records.forEach(element => {
                
                //     this.options.push({ name: element.reservoirName, code: element.orderId });
                  
                // })
                this.listData = records
                this.pageSize = result.data.limit
                this.total = result.data.total
            }
            //  去重
            // var obj = {};
            // this.options = this.options.reduce(function (item, next) {
            //     obj[next.key] ? '' : obj[next.key] = true && item.push(next);
            //     return item;
            // }, []);
        },
           // 水库列表
      async  reservoirList() {
            let data = {
                enableStatus: -1,
                limit: -1,
                page: 1
            }
            let result =await reservoir(data)
            if(result.code==0){
                let lintInfo =  result.data.records
                lintInfo.forEach(item=>{
                    this.options.push({ name: item.name, code: item.id });
                })

            }
        },
        // 所属订单搜索
        orderDataChange(e) {
            this.orderId = e
        },
        // 编辑
        editClick(e){
            let fishPartyId = e.fishPartyId
            let orderId = e.orderId
            this.$router.push({path:'/editFish',query: { fishPartyId, orderId } })
        },
        // 查看详情
        handleClick(e) {
            // 渔方ID
            let fishPartyId = e.fishPartyId
            let orderId = e.orderId

            this.$router.push({ path: '/fishEdits', query: { fishPartyId, orderId } })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.editFishParty(this.pageSize, this.currentPage)
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.editFishParty(this.pageSize, this.currentPage)
        },
        //  搜索用户ID
        btnchange(e) {
            this.userId = e
            this.editFishParty(this.pageSize, this.currentPage)
        },
        //手机号搜索
        phoneChange(e) {
            this.phoneNumber = e
            this.editFishParty(this.pageSize, this.currentPage)

        },
        // 智能渔方编号搜索
        fishnumberChange(e) {
            this.fishPartyNo = e
            this.editFishParty()
        },
        // 租赁属性搜索
        propertyChange(e) {
            this.attribute = e
            this.editFishParty(this.pageSize, this.currentPage)
        },
        // 所属水库
        cityChange(e) {
            this.reservoirId = e
            this.editFishParty(this.pageSize, this.currentPage)
        },
        btnSearch(e) {
            this.editFishParty(this.pageSize, this.currentPage)
        }
    }
};
</script>

<style lang="scss" scoped>
.left{
    margin-right: 10px;
}
::v-deep .el-form-item {
    margin-bottom: 0px;
    margin-right: 40px;

}

.upload-demo input {
    display: none;
}

.box {
    border: 1px solid #ccc;
    width: 98%;
    margin: 10px auto;
}

.list {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;

    .list-img {
        width: 20px;
        height: 20px;
    }
}

.lists {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c !important;
    color: #FFF;
}

.search {
    // display: flex;
    align-items: center;
    // height: 80px;
    line-height: 80px;
    margin: 0 20px;

}

.whead {
    width: 400px;
    display: -webkit-box;
}


</style>